<template>
    <div class="bg-light lter b-b wrapper-md clearfix titleBtns">
        <h2 class="m-n font-thin h4 pull-left">


            <dropdown>
                <button class="btn btn-dark" slot="button">{{projectName}} <span class="caret"></span></button>
                <ul slot="dropdown-menu" class="dropdown-menu">
                    <li @click="projectName='Action'"><a href="javascript:void(0)">Action</a></li>
                    <li @click="projectName='Another action'"><a href="javascript:void(0)">Another action</a></li>
                    <li @click="projectName='Something else here'"><a href="javascript:void(0)">Something else here</a></li>
                    <li @click="projectName='Separated link'"><a href="javascript:void(0)">Separated link</a></li>
                </ul>
            </dropdown>

            <span>&nbsp;&nbsp; / 数据库 > Mysql > 基本信息</span>
        </h2>
    </div>

    <div class="wrapper-md no-padding-bottom mgt-10">
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body pdb-25">
                        <div class="row">
                            <div class="col-md-6">
                                <h4>基本信息</h4>
                            </div>
                            <div class="col-md-6 text-right">
                                <h4>
                                    <span class="icon-social-dropbox"></span>
                                    <span class="icon-ghost"></span>
                                </h4>
                            </div>
                        </div>
                        <div class="row mgt-10">
                            <div class="col-md-4">
                                <p>实例ID:<span>au838492849newtouch</span></p>
                            </div>
                            <div class="col-md-4">
                                <p>实例名称:<span>newtouchone</span></p>
                            </div>
                            <div class="col-md-4">
                                <p>实例类型:<span>可用实例</span></p>
                            </div>
                            <div class="col-md-4">
                                <p>低于可用区:<span>上海二区</span></p>
                            </div>
                            <div class="col-md-4">
                                <p>内网地址:<span>pass_newtouch.com</span></p>
                            </div>
                            <div class="col-md-4">
                                <p>内网端口:<span>上海二区</span></p>
                            </div>
                            <div class="col-md-4">
                                <p>外网地址:<span>申请外网地址</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="wrapper-md no-padding-top no-padding-bottom">
        <div class="row">
            <div class="col-md-6 mgb-15">
                <div class="r bg-white dker item hbox text-center">
                    <div class="col width-30 v-middle bg-success r-l" style="padding: 13px 0;">
                        <div class="processing inline">
                        <span class="processBtn">
                            <i class="icon-speedometer"></i>
                        </span>
                            <span>运行中</span>
                        </div>
                    </div>
                    <div class="col dk padder-v r-r" style="vertical-align: middle;">
                        <div class="mgb-15">到期时间:<span>2017-04-28 21:24:03</span></div>
                        <div class="">创建时间:<span>2017-04-28 21:24:03</span></div>
                    <span class="top text-right m-r-sm">
                      <i class=" icon-clock"></i>
                    </span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-xs-4">
                <div class="panel padder-v bg-info item text-center">
                    <span class="text-muted text-xs">只读实例</span>
                    <div class="text-white font-thin h1">521</div>
                <span class="top text-left">
                  <i class="fa fa-plus text-warning m-l-sm"></i>
                </span>
                </div>
            </div>
            <div class="col-md-2 col-xs-4">
                <a href class="block panel padder-v bg-primary item text-center">
                    <span class="text-muted text-xs">灾备实例</span>
                    <span class="text-white font-thin h1 block">432</span>
                <span class="top text-left">
                  <i class="fa fa-plus text-warning m-l-sm"></i>
                </span>
                </a>
            </div>
            <div class="col-md-2 col-xs-4">
                <a href class="block panel padder-v bg-dark item text-center">
                    <span class="text-muted text-xs">临时实例</span>
                    <span class="text-white font-thin h1 block">12</span>
                <span class="top text-left">
                  <i class="fa fa-plus text-warning m-l-sm"></i>
                </span>
                </a>
            </div>
        </div>
    </div>

    <div class="wrapper-md no-padding-top no-padding-bottom">
        <div class="row">
            <div class="col-md-8 mgb-15">
                <div class="panel panel-default">
                    <div class="panel-body pdb-25">
                        <div class="row">
                            <div class="col-md-6">
                                <h4>配置信息</h4>
                            </div>
                            <div class="col-md-6 text-right">
                                <span class="fa fa-cog"></span>
                            </div>
                        </div>
                        <div class="row mgt-10">
                            <div class="col-md-6">
                                <p>数据库版本:<span>MySQL5.7</span></p>
                            </div>
                            <div class="col-md-6">
                                <p>数据库内存:<span>1G</span></p>
                            </div>
                            <div class="col-md-6">
                                <p>最大连接数:<span>200</span></p>
                            </div>
                            <div class="col-md-6">
                                <p>最大IOPS:<span>600</span></p>
                            </div>
                            <div class="col-md-6">
                                <p>可维护时段:<span>02:00 - 06:00</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-body pdb-25">
                        <div class="row">
                            <div class="col-md-6">
                                <h4>配置信息</h4>
                            </div>
                        </div>
                        <div class="row mgt-10">
                            <div class="col-md-12">
                                <p>存储空间:<span>已使用1.18G(共5.00G)</span></p>
                            </div>
                            <div class="col-md-12">
                                <p>备份使用量:<span>25.63M (2560M以内免费)</span><i class="fa fa-eye text-success" style="margin-left: 10px;"></i></p>
                            </div>
                            <div class="col-md-12">
                                <p>SQL采集量:<span>0.00K</span><i class="fa fa-eye text-success" style="margin-left: 10px;"></i></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<style>

</style>
<script>

    import {dropdown} from 'vue-strap'

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}
            return {        //必须使用这样的形式，才能创建出单一的作用域
                projectName:'Action'
            }
        },
        ready () {

        },
        methods :{

        },
        components: {
            dropdown
        }
    }
</script>
